<template>
  <zeda-dialog
    v-model="visible"
    title="设置主管单位"
    width="500px"
    :before-close="handleClose"
    class="dialog-continer"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="24" :style="'margin-bottom: ' + marginNum + 'px'">
          <el-form-item label="主管部门" prop="manageDeptId">
            <Treeselect
              v-model="form.manageDeptId"
              :options="deptOptions"
              :normalizer="normalizer"
              placeholder="选择主管部门"
              class="parent-dept-area"
              @open="treeselectOpen"
              @close="treeselectClose"
              @select="(node) => treeHandleSelect(node)"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      :submitText="'确定'"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { listDept, setManagedept } from "@/api/system/orgdept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import FormButton from "@/components/FormButton";

export default {
  dicts: ["energy_type"],
  components: {
    Treeselect,
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    manageDeptId: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      form: {
        deptId: null,
        manageDeptId: null,
      },
      rules: {
        manageDeptId: [
          { required: false, message: "主管部门不能为空", trigger: "blur" },
        ],
      },
      deptOptions: [],
      marginNum: 0,
      typeChose: null,
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (String(this.id).length > 0) {
          this.getTree();
        }
      }
    },
  },
  methods: {
    getInfo() {
      this.form.deptId = this.id;
      this.form.manageDeptId = this.manageDeptId;
    },
    getTree() {
      listDept({})
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          this.deptOptions = this.handleTree(arr, "deptId");
          console.log(this.deptOptions, "123123123");
          this.getInfo();
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    submit() {
      const data = {
        deptId: this.id,
        manageDeptId: this.form.manageDeptId,
      };
      this.$refs.form.validate((valid) => {
        if (this.typeChose == 8) {
          this.$message.warning("不能选择区域部门为主管部门");
        } else {
          if (valid) {
            this.loading = true;
            this.request(data);
          } else {
            return false;
          }
        }
      });
    },
    request(data) {
      setManagedept(data)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.$message.success("操作成功");
          this.handleClose(true);
        })
        .catch(() => {
          this.loading = false;
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    treeselectOpen() {
      this.marginNum = 100;
    },
    treeselectClose() {
      this.marginNum = 0;
    },
    treeHandleSelect(node) {
      this.typeChose = node.type;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
}

.dialog-continer {
  top: 250px;
}
.parent-dept-area {
  height: 24px !important;
  ::v-deep .vue-treeselect__control {
    height: 22px !important;
  }
}
</style>
